<template>
    <div class="box-right-top panel">
        <title-box title="设备状态">
            <div class="x-content-inner">
                <pie-chart :colors="colors" :list="list" />
            </div>
        </title-box>
    </div>
</template>
<script setup name="StationDevicesStatusComponent">
import { ref, watch } from 'vue'

import TitleBox from './../TitleBox/index.vue'
import PieChart from './../PieChart/index.vue'
import { queryDevicesStatus } from '/@/api/Iframe/Home/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'

const props = defineProps({
    stationId: {
        type: Number
    }
})

const colors = ['#5982FF', '#f74d4d', '#b9b9b9']
const list = ref([])

const status = {
    0: '正常',
    1: '告警',
    2: '离线'
}

const query = () => {
    if (props.stationId) {
        queryDevicesStatus({ stationId: props.stationId }).then(result => {
            if (result.code === SUCCESS_CODE) {
                if (result.data && result.data.length > 0) {
                    list.value = result.data.map(item => {
                        return { value: item.counting, name: status[item.status] }
                    })
                } else {
                    list.value = []
                }
            } else {
                list.value = []
            }
        })
    }
}
watch(
    () => props.stationId,
    () => {
        query()
    }
)

query()
</script>
